<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<title></title>
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<div class="main">
           <!--视频-->
			<div id="vedio">
				<video src="av/v1.mp4" class="video" id="js-video" preload="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="true"  playsinline="true" x-webkit-playsinline="true" style="object-fit: fill;object-position: center center;"></video>
				<div class="play"><img class="fill" src="img/icon_play.png"></div>
			</div>
			<!-- 开始挑战 -->
			<div id="startChallenge" class="">
				<div id="logo"><img class="fill" src="img/logo_1.png"></div>
				<a class='btn btn1' href="register.html">开 启 28 天 挑 战</a>
			</div>
			<!-- 加载 -->
			<div id='loading' class="">
				<img src="img/loading.png">
				<div class="progressBar">
					<div class="progressBarIn"></div>
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js"></script>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
            //设置视频大小 全屏
            function setSize(){
                var video = {width:640,height:1028};
                var Wwidth = $(window).width();
                var Wheight = $(window).height();
                var scale = (Wheight/Wwidth)/(video.height/video.width);
                $('.video').css({'transform':'translate(-50%,-50%) scale('+scale+')','-webkit-transform':'translate(-50%,-50%) scale('+scale+')'});
            }
            setSize();
            var video = document.getElementById('js-video');
            document.addEventListener("WeixinJSBridgeReady",function(){
                video.play();
            }, false);
            video.addEventListener('ended', function(e) {
                setTimeout(function(){
                    $("#startChallenge").addClass('show');
                },300)
            });
            video.addEventListener('play', function(e) {
                $(".play").removeClass('show');
            });
            $('.play').click(function(){
                $(".play").removeClass('show');
                video.play();
                return false;
            });
            /*
            document.addEventListener("WeixinJSBridgeReady", function (){
                $('.video')[0].play();
            }, false);
            console.log(_isAndroid());
            //自动播放
            function videoAutoPlay(){
                if(netease.ua.android) {
                    $(".play").addClass('show');
                    $('.play').click(function(){
                        $(".play").removeClass('show');
                        $('.video')[0].play();
                        $('.video').on('ended', function() {
                            $("#startChallenge").addClass('show');
                        })
                    })
                }else if(netease.ua.ios || netease.ua.pc) {
                    $('.video')[0].play();
                    document.addEventListener("WeixinJSBridgeReady", function () {
                        //$('.video')[0].play();
                    }, false);
                    $('.video').on('ended', function() {
                        $("#startChallenge").addClass('show');
                    })
                }
            }
            */
            var getImgload = function(abs,fn){
                var img = $("img"); //获取页面图片img
                var imgList = abs;	//获取手动添加的img
                var back = {};//返回值，sum 图片总数 num 图片已加载数量
                for(var i = 0;i< img.length;i++){
                    imgList.push(img[i].src);
                }
                back.sum = imgList.length;
                imgLoad();
                function imgLoad(){
                    var num=0;
                    for(var i = 0;i< imgList.length;i++){
                        preImage(imgList[i],function(){
                            num++;
                            back.num = num;
                            $('.progressBarIn').css({width:num*100/imgList.length+'%'});
                            if(back.num == back.sum){
                                $('#loading').addClass('hide');
                            }
                            fn.call(back);
                        });
                    }
                }
                //判断图片是否加载,加载完成后执行返回函数callback
                function preImage(url,callback){
                    var img = new Image();
                    img.src = url;
                    if(img.complete){
                        callback.call(img);
                        return;
                    }
                    img.onload = function () {
                        callback.call(img);
                    };
                }
            };
            //图片加载loading
            var imglist=['img/hp_tips.png','img/icon_a1.png','img/icon_aa.png','img/icon_add.png','img/icon_bf.png','img/icon_jz.png','img/icon_left.png','img/icon_n.png','img/icon_next.png','img/icon_p.png','img/icon_play.png','img/icon_prev.png','img/icon_right.png','img/icon_search.png','img/icon_slogon.png','img/icon_star.png','img/icon_zt.png','img/img6.jpg','img/loading.png','img/logo_1.png','img/logo_2.png'];
            getImgload(imglist,function(){
                if(this.num == this.sum){
                    video.play();
                    if (_isAndroid()) {
                        $(".play").addClass('show');
                    }
                }
            });

            function _isAndroid(){
                var u = navigator.userAgent,
                    isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android
                    isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios
                if (isAndroid) return true;
                else return false;
            }
		</script>
	</body>
</html>